<!--
 * @Author: “张矗” “1279074338@qq.com”
 * @Date: 2023-11-04 09:44:30
 * @LastEditors: “张矗” “1279074338@qq.com”
 * @LastEditTime: 2023-11-06 18:57:13
 * @FilePath: \qn\src\components\tabBer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<keep-alive>
			<router-view />
		</keep-alive>
		<div class="tabBer">
			<van-tabbar v-model="active">
				<van-tabbar-item to="/index">
					<span>首页</span>
					<template #icon="props">
						<van-icon class-prefix="icon" :name="props.active ? 'home' : 'fhome'" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item to="/order">
					<span>订单</span>
					<template #icon="props">
						<van-icon class-prefix="icon" :name="props.active ? 'dingdan' : 'fdingdan'" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item to="/service">
					<span>客服</span>
					<template #icon="props">
						<van-icon class-prefix="icon" :name="props.active ? 'kefu' : 'fkefu'" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item to="/me">
					<span>我的</span>
					<template #icon="props">
						<van-icon class-prefix="icon" :name="props.active ? 'wode' : 'fwode'" />
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
export default {
	name: "tabBer",
	data() {
		return {
			active: 0,
		}
	},
	methods: {
		name() {

		}
	},
}
</script>

<style lang="scss" scoped>
.tabBer {
	position: relative;
	height: 50px;
}
</style>
